<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>项目列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="addUser">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                height="69vh"
                :data="listMaterialClassify"
                stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="projectCode"
                    label="项目编码"
            >
            </el-table-column>
            <el-table-column
                    prop="projectName"
                    label="项目编码"
            >
            </el-table-column>
            <el-table-column
                    width="200px"
                    prop="createTime"
                    label="创建时间"
            >
            </el-table-column>
            <el-table-column
                    prop="customerName"
                    label="客户姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="customerTel"
                    label="客户电话"
            >
            </el-table-column>
            <el-table-column
                    prop="startDate"
                    label="开始时间"
            >
            </el-table-column>
            <el-table-column
                    prop="endDate"
                    label="结束时间"
            >
            </el-table-column>
            <el-table-column
                    prop="payAmount"
                    label="金额"
            >
            </el-table-column>
            <el-table-column
                    prop="payModel"
                    label="支付方式"
            >
            </el-table-column>
            <el-table-column
                    prop="projectAddress"
                    label="项目地址"
            >
            </el-table-column>

            <el-table-column
                    width="200"
                    label="操作">
                <template slot="header">
                    <el-input
                            @input="getSearch"
                            v-model="search"
                            size="mini"
                            prefix-icon="el-icon-search"
                            placeholder="请输入项目"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="addUserFrom" :rules="rules" ref="from">
                <el-form-item label="项目名称:" prop="name">
                    <el-input v-model="addUserFrom.name"

                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination
                :page-size="10"
                :pager-count="11"
                @current-change="pageNum"
                layout="prev, pager, next"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    import {delProjectName, projectList, addProjectName,projectUpdate} from "../../network/business";

    export default {
        name: "index",
        data() {
            return {
                search: '',
                dialogFormVisible: false,
                disabled: false,
                title: "新增项目",
                rules: {
                    name: [
                        {required: true, message: '请输入项目名称', trigger: 'blur'},
                    ],
                },

                addUserFrom: {
                    classifyCode: "",
                    name: "",
                    update: false
                },
                defaddUserFrom: {
                    name: "",
                    pass: "",
                    update: false
                },
                totalSize: 0,
                listMaterialClassify: [],
                dataPage: {
                    pageNum: 1,
                    pageSize:10
                }

            }
        },
        created() {
            this.getProjectList()
        },
        methods: {
            pageNum(num) {
                this.dataPage.pageNum = num
                this.getProjectList()
            },
            getSearch(){

                this.dataPage.pageNum=1
                this.dataPage.searchVal=this.search
                this.getProjectList()
            },
            async getProjectList() {
                let status = await projectList(this.dataPage)
                if (status.code) {
                    this.listMaterialClassify = status.data.content
                    this.totalSize = status.data.totalSize

                } else {
                    this.$error(status.msg)
                }
            },
            upd(row) {
                this.addUserFrom.projectCode=row.projectCode
                this.addUserFrom.name=row.projectName
                this.dialogFormVisible = true
                this.addUserFrom.update=true

            },
            del(row) {
                this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let data = {
                        id: row.projectCode
                    }
                    let status = await delProjectName(data)
                    if (status.code == 200) {
                        this.$success('成功删除!')
                        this.getProjectList()
                    } else {
                        this.$success(status.msg)
                    }


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            addUser() {
                this.dialogFormVisible = true
            },
            cancel() {
                this.dialogFormVisible = false
                this.addUserFrom = Object.assign({}, this.defaddUserFrom)
            },
            confirm() {

                this.$refs.from.validate(async v => {
                    if (!v){
                        this.$message.error('请输入岗位名称')
                        return
                    }
                    if (!this.addUserFrom.update) {

                        let data = {
                            projectName: this.addUserFrom.name,
                        }
                        let status = await addProjectName(data)
                        if (status.code == 200) {
                            this.dialogFormVisible = false
                            this.$success("添加项目成功！")
                            this.addUserFrom = Object.assign({}, this.defaddUserFrom)
                            this.getProjectList()
                        } else {
                            this.$error(status.msg)
                        }
                    } else {
                        let data ={
                            projectName: this.addUserFrom.name,
                            projectCode:this.addUserFrom.projectCode
                        }
                        projectUpdate(data).then(v=>{
                           if(v.code==200){
                               this.$success("修改项目名称成功！")
                               this.dialogFormVisible=false
                               this.addUserFrom = Object.assign({}, this.defaddUserFrom)
                               this.getProjectList()
                           }else{
                               this.$error(v.msg)
                           }
                        })


                    }
                })

            }

        }
    }
</script>

<style scoped lang="sass">
    .header
        margin-bottom: 20px

        .el-select
            width: 100%

        ::v-deep .el-dialog
            width: 30%
            border-radius: 5px

</style>